<template>
  <div>
    <div>
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="商品基本信息" />
        <el-step title="添加库存信息" />
        <el-step title="添加移动端详情" />
      </el-steps>
    </div>
    <div class="margin_30">
      <el-form ref="form" :model="form" label-width="80px" :inline="false" size="mini">

        <div v-if="active == 1">
          <h2>商品基本信息</h2>
          <el-divider />
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="商品名称">
                <el-input v-model="form.product.name" placeholder="" clearable @change="" />

              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="商品编码">
                <el-input v-model="form.product.productSn" placeholder="" clearable @change="" />

              </el-form-item>
            </el-col>
            <el-col :span="8" :offset="0">
              <el-form-item label="商品分类">
                <!-- <el-input v-model="form.product.name" placeholder="" size="normal" clearable @change="" /> -->
                <el-select v-model="form.product.productCategoryId" @change="getName(form.product.productCategoryId,0)">
                  <el-option
                    v-for="item in categoryList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>

              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8" :offset="0">
              <el-form-item label="商品品牌">
                <el-select v-model="form.product.brandId" placeholder="请选择" @change="getName(form.product.brandId,1)">
                  <el-option
                    v-for="item in brandList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>

              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16" :offset="0">
              <el-form-item label="商品描述">
                <el-input
                  v-model="form.product.description"
                  type="textarea"
                  :rows="2"
                  placeholder="请输入内容"
                />

              </el-form-item>
            </el-col>
          </el-row>

        </div>
        <div v-else-if="active == 2">
          添加库存信息
          <el-row :gutter="20">
            <el-col :span="24" :offset="0">
              <el-form-item label="添加画册图片">
                <el-upload
                  action="/lejuAdmin/material/uploadFileOss"
                  list-type="picture-card"
                  :headers="headers"
                  :on-success="getUploadImg1"
                  :file-list="fileList"
                >
                  <i slot="default" class="el-icon-plus" />
                  <div slot="file" slot-scope="{file}">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    >
                    <span class="el-upload-list__item-actions">

                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleDownload(file)"
                      >
                        <i class="el-icon-download" />
                      </span>
                      <span
                        v-if="!disabled"
                        class="el-upload-list__item-delete"
                        @click="handleRemove(file)"
                      >
                        <i class="el-icon-delete" />
                      </span>
                    </span>
                  </div>
                </el-upload>
              </el-form-item>
              <el-form-item label="sku设置">
                <div v-if="colorList.length != 0">
                  颜色： <el-checkbox v-for="item in colorList" :key="item.id" v-model="item.isSelected">{{ item.name }}</el-checkbox>
                </div>
                <div v-if="sizeList.length != 0">
                  大小：
                  <el-checkbox v-for="item in sizeList" :key="item.id" v-model="item.isSelected">{{ item.name }}</el-checkbox>
                </div>
                <el-row :gutter="20">
                  <el-col :span="5" :offset="0">
                    <el-input v-model.trim="color" placeholder=""clearable @change="" />

                  </el-col>
                  <el-col :span="3" :offset="0">
                    <el-button type="primary" @click="addColor">创建颜色选项</el-button>

                  </el-col>
                  <el-col :span="5" :offset="0">
                    <el-input v-model="size" placeholder=""clearable @change="" />

                  </el-col>
                  <el-col :span="3" :offset="0">
                    <el-button type="primary" @click="addSize">创建大小选项</el-button>

                  </el-col>
                  <el-col :span="5" :offset="2">

                    <el-button type="primary" @click="addSku">生成sku</el-button>
                    <el-button type="primary" @click="">新增sku</el-button>
                  </el-col>
                </el-row>
                <el-table v-if="form.pmsSkuStockList.length" :data="form.pmsSkuStockList" border stripe>
                  <el-table-column
                    prop="id"
                    label="图片"
                  >
                    <template v-slot="scope">
                      <!-- <el-upload
                        ref="upload"
                        action=""
                        :on-remove=""
                        :auto-upload="false"
                        multiple
                        :limit="5"
                        :on-exceed=""
                        :file-list=""
                      /> -->
                      <el-upload
                        class="upload-demo"
                        action="/lejuAdmin/material/uploadFileOss"
                        :headers="headers"
                        :show-file-list="false"
                        :on-success="el => getUploadImg(el,scope.$index)"
                      >
                        <img v-if="scope.row.pic" :src="scope.row.pic" alt="">
                        <el-button v-else size="small" type="primary">点击上传</el-button>

                      </el-upload>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="id"
                    label="颜色"
                  >
                    <template v-slot="scope">
                      <el-input v-model="scope.row.spData[0].value" placeholder="" size="normal" clearable @change="" />

                      </el-upload>

                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="id"
                    label="大小"
                  >
                    <template v-slot="scope">
                      <el-input v-model="scope.row.spData[1].value" placeholder="" size="normal" clearable @change="" />

                      </el-upload>

                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="id"
                    label="库存"
                  >
                    <template v-slot="scope">
                      <el-input v-model="scope.row.stock" placeholder="" size="normal" clearable @change="" />

                      </el-upload>

                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="id"
                    label="预警库存"
                  >
                    <template v-slot="scope">
                      <el-input v-model="scope.row.lowStock" placeholder="" size="normal" clearable @change="" />

                      </el-upload>

                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="id"
                    label="锁定库存"
                  >
                    <template v-slot="scope">
                      <el-input v-model="scope.row.lockStock" placeholder="" size="normal" clearable @change="" />

                      </el-upload>

                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="id"
                    label="sku编码"
                  >
                    <template v-slot="scope">
                      <el-input v-model="scope.row.skuCode" placeholder="" size="normal" clearable @change="" />

                      </el-upload>

                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="id"
                    label="价格"
                  >
                    <template v-slot="scope">
                      <el-input v-model="scope.row.price" placeholder="" size="normal" clearable @change="" />

                      </el-upload>

                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="id"
                    label="销量"
                  >
                    <template v-slot="scope">
                      <el-input v-model="scope.row.sale" placeholder="" size="normal" clearable @change="" />

                      </el-upload>

                    </template>
                  </el-table-column>

                </el-table>

              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-else>
          添加移动端详情
        </div>
        <!-- <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item> -->
      </el-form>

    </div>
    <div style="display:flex;justify-content:center;">
      <el-button v-if="active == 2 || active ==3" type="primary" size="mini" @click="prev">返回上一步</el-button>
      <el-button v-if="active == 1 || active ==2" type="primary" size="mini" @click="next">
        下一步, {{ active == 1 ? '填写库存信息':"填写移动端详情" }}
      </el-button>
      <el-button v-if="active == 3" type="primary" size="mini" @click="save">提交保存</el-button>

    </div>
  </div>
</template>

<script>
import {
  getAllCategory,
  addProductAndSkus,
  productSkusDetail,
  updateProductAndSkus
} from '@/api/goodsManage/addGoods'
import {
  findAllBrand
} from '@/api/goodsManage/goodsList/index.js'
import {
  getToken
} from '@/utils/myAuth.js'
export default {
  data() {
    return {
      headers: {
        token: getToken()
      },
      active: 2,
      categoryList: [], // 分类数据
      brandList: [], // 品牌数据部分
      color: '', // 保存颜色
      colorList: [

      ], // 保存颜色的数组
      size: '', // 保存大小
      sizeList: [

      ], // 保存大小的数组
      fileList: [],
      form: {
        'pmsSkuStockList': [

        ],
        'product': {
          'albumPics': 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/53807/34/23991/115901/6475ec57F96e29d2c/c3b510f2bb658e9d.jpg.avif,https://img10.360buyimg.com/n1/s450x450_jfs/t1/101581/31/37360/123005/6475ec56F175848a0/929bf3e185b7cb17.jpg.avif',
          'brandId': '',
          'brandName': '',
          'createTime': '',
          'deleteStatus': '',
          'description': '',
          'detailDesc': '',
          'detailHtml': '',
          'detailMobileHtml': `<div id="J-detail-pop-tpl-top-new" clstag="shangpin|keycount|product|pop-glbs">
                                            <style>.ssd-module-wrap.ssd-format-wrap{position:relative;margin:0 auto;width:750px;text-align:left;background-color:#fff}.ssd-module-wrap.ssd-format-wrap .ssd-module,.ssd-module-wrap.ssd-format-wrap .ssd-module-heading{width:750px;position:relative;overflow:hidden}.ssd-module-wrap.ssd-format-wrap .ssd-floor-activity{max-height:380px;overflow:hidden}.ssd-module-wrap.ssd-format-wrap .ssd-floor-shopPrior{max-height:900px;overflow:hidden}.ssd-module-wrap.ssd-format-wrap .ssd-floor-authorize{max-height:300px;overflow:hidden}.ssd-module-wrap.ssd-format-wrap .ssd-floor-reminder{max-height:4000px;overflow:hidden}.ssd-module-wrap.ssd-format-wrap .ssd-module{background-repeat:no-repeat;background-position:left top;background-size:100% 100%}.ssd-module-wrap.ssd-format-wrap .ssd-module-heading{background-repeat:no-repeat;background-position:left center;background-size:100% 100%}.ssd-module-wrap.ssd-format-wrap .ssd-module-heading .ssd-module-heading-layout{display:inline-block}.ssd-module-wrap.ssd-format-wrap .ssd-module-heading .ssd-widget-heading-ch{float:left;display:inline-block;margin:0 6px 0 15px;height:100%}.ssd-module-wrap.ssd-format-wrap .ssd-module-heading .ssd-widget-heading-en{float:left;display:inline-block;margin:0 15px 0 6px;height:100%}.ssd-module-wrap.ssd-format-wrap .ssd-widget-circle,.ssd-module-wrap.ssd-format-wrap .ssd-widget-line,.ssd-module-wrap.ssd-format-wrap .ssd-widget-pic,.ssd-module-wrap.ssd-format-wrap .ssd-widget-rectangle,.ssd-module-wrap.ssd-format-wrap .ssd-widget-table,.ssd-module-wrap.ssd-format-wrap .ssd-widget-text,.ssd-module-wrap.ssd-format-wrap .ssd-widget-triangle{position:absolute;overflow:hidden}.ssd-module-wrap.ssd-format-wrap .ssd-widget-rectangle{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.ssd-module-wrap.ssd-format-wrap .ssd-widget-triangle svg{width:100%;height:100%}.ssd-module-wrap.ssd-format-wrap .ssd-widget-table table{width:100%;height:100%}.ssd-module-wrap.ssd-format-wrap .ssd-widget-table td{position:relative;white-space:pre-line;word-break:break-all}.ssd-module-wrap.ssd-format-wrap .ssd-widget-pic img{display:block;width:100%;height:100%}.ssd-module-wrap.ssd-format-wrap .ssd-widget-text{line-height:1.5;word-break:break-all}.ssd-module-wrap.ssd-format-wrap .ssd-widget-text span{display:block;overflow:hidden;width:100%;height:100%;padding:0;margin:0;word-break:break-all;word-wrap:break-word;white-space:normal}.ssd-module-wrap.ssd-format-wrap .ssd-widget-link{position:absolute;left:0;top:0;width:100%;height:100%;background:0 0;z-index:100}.ssd-module-wrap.ssd-format-wrap .ssd-widget-link .ssd-widget-hot-price{position:absolute;max-width:100%;line-height:1;white-space:nowrap}.ssd-module-wrap.ssd-format-wrap .ssd-widget-link .ssd-widget-hot-price label{cursor:pointer}.ssd-module-wrap.ssd-format-wrap .ssd-cell-text{position:absolute;top:0;left:0;right:0;width:100%;height:100%;overflow:auto}.ssd-module-wrap.ssd-format-wrap .ssd-show{display:block}.ssd-module-wrap.ssd-format-wrap .ssd-hide{display:none}.ssd-module-wrap.ssd-format-wrap.ssd-format-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:-moz-box;display:-moz-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-moz-justify-content:center;-ms-flex-pack:center;justify-content:center}.ssd-module-wrap.ssd-format-wrap.ssd-format-left{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:-moz-box;display:-moz-flex;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-moz-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.ssd-module-wrap.ssd-format-wrap.ssd-format-right{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:-moz-box;display:-moz-flex;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-moz-box-pack:end;-moz-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.ssd-module-wrap .M16825648827631{width:750px; height:380px}
.ssd-module-wrap  .M16825648827631 li {
  list-style-type: none;
}

.ssd-module-wrap  .M16825648827631 a {
  display: block;
  overflow: hidden;
}

.ssd-module-wrap  .M16825648827631 .ssd-shop-activity-item img {
  display: block;
  width: 100%;
}
.ssd-module-wrap:not(.ssd-format-wrap) .ssd-module-shopActivity {
  display:none
}</style><div class="ssd-module-wrap ssd-format-wrap" style="margin: 0 auto">
            <div class="ssd-format-floor ssd-floor-activity">
                            <div skudesign="100010" class="ssd-floor-type" data-type="activity"></div>
                        <div id="zbViewFloorHeight_activity" value="380"></div>
            <div id="ssd-vc-shopActivity" class="ssd-module ssd-module-shopActivity M16825648827631" data-id="M16825648827631">
	<ul>
	            	 	        	            <li>
	                <a href="//item.jd.com/100057334060.html" target="_self">
	                    <div class="ssd-shop-activity-item">
	                        <img src="//img30.360buyimg.com/sku/jfs/t1/198392/9/38514/44104/64a550aeFafdfed30/8a6c132db2e3d432.jpg.avif" alt="">
	                    </div>
	                </a>
	            </li>
	        	    	</ul>
</div>
        </div>
    </div>
<!-- 2023-07-05 08:04:58 --> <style>.ssd-module-wrap.ssd-format-wrap{position:relative;margin:0 auto;width:750px;text-align:left;background-color:#fff}.ssd-module-wrap.ssd-format-wrap .ssd-module,.ssd-module-wrap.ssd-format-wrap .ssd-module-heading{width:750px;position:relative;overflow:hidden}.ssd-module-wrap.ssd-format-wrap .ssd-floor-activity{max-height:380px;overflow:hidden}.ssd-module-wrap.ssd-format-wrap .ssd-floor-shopPrior{max-height:900px;overflow:hidden}.ssd-module-wrap.ssd-format-wrap .ssd-floor-authorize{max-height:300px;overflow:hidden}.ssd-module-wrap.ssd-format-wrap .ssd-floor-reminder{max-height:4000px;overflow:hidden}.ssd-module-wrap.ssd-format-wrap .ssd-module{background-repeat:no-repeat;background-position:left top;background-size:100% 100%}.ssd-module-wrap.ssd-format-wrap .ssd-module-heading{background-repeat:no-repeat;background-position:left center;background-size:100% 100%}.ssd-module-wrap.ssd-format-wrap .ssd-module-heading .ssd-module-heading-layout{display:inline-block}.ssd-module-wrap.ssd-format-wrap .ssd-module-heading .ssd-widget-heading-ch{float:left;display:inline-block;margin:0 6px 0 15px;height:100%}.ssd-module-wrap.ssd-format-wrap .ssd-module-heading .ssd-widget-heading-en{float:left;display:inline-block;margin:0 15px 0 6px;height:100%}.ssd-module-wrap.ssd-format-wrap .ssd-widget-circle,.ssd-module-wrap.ssd-format-wrap .ssd-widget-line,.ssd-module-wrap.ssd-format-wrap .ssd-widget-pic,.ssd-module-wrap.ssd-format-wrap .ssd-widget-rectangle,.ssd-module-wrap.ssd-format-wrap .ssd-widget-table,.ssd-module-wrap.ssd-format-wrap .ssd-widget-text,.ssd-module-wrap.ssd-format-wrap .ssd-widget-triangle{position:absolute;overflow:hidden}.ssd-module-wrap.ssd-format-wrap .ssd-widget-rectangle{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}.ssd-module-wrap.ssd-format-wrap .ssd-widget-triangle svg{width:100%;height:100%}.ssd-module-wrap.ssd-format-wrap .ssd-widget-table table{width:100%;height:100%}.ssd-module-wrap.ssd-format-wrap .ssd-widget-table td{position:relative;white-space:pre-line;word-break:break-all}.ssd-module-wrap.ssd-format-wrap .ssd-widget-pic img{display:block;width:100%;height:100%}.ssd-module-wrap.ssd-format-wrap .ssd-widget-text{line-height:1.5;word-break:break-all}.ssd-module-wrap.ssd-format-wrap .ssd-widget-text span{display:block;overflow:hidden;width:100%;height:100%;padding:0;margin:0;word-break:break-all;word-wrap:break-word;white-space:normal}.ssd-module-wrap.ssd-format-wrap .ssd-widget-link{position:absolute;left:0;top:0;width:100%;height:100%;background:0 0;z-index:100}.ssd-module-wrap.ssd-format-wrap .ssd-widget-link .ssd-widget-hot-price{position:absolute;max-width:100%;line-height:1;white-space:nowrap}.ssd-module-wrap.ssd-format-wrap .ssd-widget-link .ssd-widget-hot-price label{cursor:pointer}.ssd-module-wrap.ssd-format-wrap .ssd-cell-text{position:absolute;top:0;left:0;right:0;width:100%;height:100%;overflow:auto}.ssd-module-wrap.ssd-format-wrap .ssd-show{display:block}.ssd-module-wrap.ssd-format-wrap .ssd-hide{display:none}.ssd-module-wrap.ssd-format-wrap.ssd-format-center{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:-moz-box;display:-moz-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-moz-justify-content:center;-ms-flex-pack:center;justify-content:center}.ssd-module-wrap.ssd-format-wrap.ssd-format-left{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:-moz-box;display:-moz-flex;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-moz-box-pack:start;-moz-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}.ssd-module-wrap.ssd-format-wrap.ssd-format-right{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:-moz-box;display:-moz-flex;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-moz-box-pack:end;-moz-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end}.ssd-module-wrap .M16876772815561{width:750px; background-color:#d7d7d7; background-size:100% 100%; background-image:url(//img30.360buyimg.com/sku/jfs/t1/111221/5/36697/64149/6497e969Ff9a26d2e/2298c6084f072d8f.jpg.avif); height:726px}
.ssd-module-wrap.ssd-format-wrap .W16876773247197{rotate:0; z-index:5; color:#D0021B; font-weight:normal; letter-spacing:0px; text-decoration:none; font-size:20px; line-height:1.5; font-style:normal; background-color:transparent; top:409px; left:32px; width:220px; font-family:microsoft yahei; height:287px}
.ssd-module-wrap.ssd-format-wrap .W16876773218226{rotate:0; z-index:4; color:#D0021B; font-weight:normal; letter-spacing:0px; text-decoration:none; font-size:20px; line-height:1.5; font-style:normal; background-color:transparent; top:412px; left:265px; width:220px; font-family:microsoft yahei; height:287px}
.ssd-module-wrap.ssd-format-wrap .W16876773168265{rotate:0; z-index:3; color:#D0021B; font-weight:normal; letter-spacing:0px; text-decoration:none; font-size:20px; line-height:1.5; font-style:normal; background-color:transparent; top:411px; left:499px; width:220px; font-family:microsoft yahei; height:287px}
.ssd-module-wrap.ssd-format-wrap .W16876773126534{rotate:0; z-index:2; color:#D0021B; font-weight:normal; letter-spacing:0px; text-decoration:none; font-size:20px; line-height:1.5; font-style:normal; background-color:transparent; top:108px; left:499px; width:220px; font-family:microsoft yahei; height:287px}
.ssd-module-wrap.ssd-format-wrap .W16876773081153{rotate:0; z-index:1; color:#D0021B; font-weight:normal; letter-spacing:0px; text-decoration:none; font-size:20px; line-height:1.5; font-style:normal; background-color:transparent; top:108px; left:265px; width:220px; font-family:microsoft yahei; height:287px}
.ssd-module-wrap.ssd-format-wrap .W16876772990822{rotate:0; z-index:0; color:#D0021B; font-weight:normal; letter-spacing:0px; text-decoration:none; font-size:20px; line-height:1.5; font-style:normal; background-color:transparent; top:108px; left:32px; width:220px; font-family:microsoft yahei; height:287px}
.ssd-module-wrap:not(.ssd-format-wrap) .ssd-module-goods {
  display:none
}</style><div class="ssd-module-wrap ssd-format-wrap" style="margin: 0 auto">
            <div class="ssd-format-floor ssd-floor-shopPrior">
                            <div skudesign="100010" class="ssd-floor-type" data-type="shopPrior"></div>
                        <div id="zbViewFloorHeight_shopPrior" value="726"></div>
            <div class="ssd-module M16876772815561 animate-M16876772815561" data-id="M16876772815561">
        <div class="ssd-widget-text W16876773247197">
    
     <a class="ssd-widget-link" href="//item.jd.com/100051068439.html" target="_blank">

                                </a>
    

</div>
<div class="ssd-widget-text W16876773218226">
    
     <a class="ssd-widget-link" href="//item.jd.com/100056456219.html" target="_blank">

                                </a>
    

</div>
<div class="ssd-widget-text W16876773168265">
    
     <a class="ssd-widget-link" href="//item.jd.com/100050339522.html" target="_blank">

                                </a>
    

</div>
<div class="ssd-widget-text W16876773126534">
    
     <a class="ssd-widget-link" href="//item.jd.com/100053676321.html" target="_blank">

                                </a>
    

</div>
<div class="ssd-widget-text W16876773081153">
    
     <a class="ssd-widget-link" href="//item.jd.com/100037437645.html" target="_blank">

                                </a>
    

</div>
<div class="ssd-widget-text W16876772990822">
    
     <a class="ssd-widget-link" href="//item.jd.com/100052541468.html" target="_blank">

                                </a>
    

</div>

</div>

        </div>
    </div>
<!-- 2023-07-05 08:04:58 --> <div class="ssd-module-wrap ssd-format-wrap ssd-format-center" style="margin: 0 auto"><div class="ssd-format-floor ssd-floor-dynamic J_formatDynamic"></div>
</div></div>`,
          'detailTitle': '荣耀X40',
          'feightTemplateId': '',
          'giftGrowth': '',
          'giftPoint': '',
          'id': '',
          'keywords': '地中海,欧式,桌子',
          'lowStock': '',
          'modifyTime': '',
          'name': '',
          'newStatus': 1,
          'note': '国庆活动，商品8折，每个用户仅限购买一次',
          'originalPrice': 1000,
          'pic': 'https://img10.360buyimg.com/n1/s450x450_jfs/t1/7169/20/17985/33829/63241b3aE7dcfd261/efb35507276509cd.jpg.avif',
          'previewStatus': 1,
          'price': 1000,
          'productAttributeCategoryId': '',
          'productCategoryId': '',
          'productCategoryName': '',
          'productSn': '',
          'promotionEndTime': '',
          'promotionPerLimit': '',
          'promotionPrice': '',
          'promotionStartTime': '',
          'promotionType': '',
          'publishStatus': 1,
          'recommendStatus': 1,
          'sale': '',
          'serviceIds': '1,3',
          'sort': 999,
          'stock': '',
          'subTitle': 'X40',
          'unit': '',
          'usePointLimit': '',
          'verifyStatus': 1,
          'weight': 10000
        }
      }
    }
  },
  computed: {

  },
  created() {
    if (this.$route.query.id) {
      productSkusDetail(this.$route.query.id)
        .then(res => {
          res.data.skus.forEach(ele => {
            ele.spData = JSON.parse(ele.spData)
          })
          this.fileList = res.data.product.albumPics.split(',').map(ele => {
            var arr = ele.split('/')
            return {
              name: arr[arr.length - 1],
              url: ele
            }
          })
          this.form.product = res.data.product
          this.form.pmsSkuStockList = res.data.skus
        })
    }
    getAllCategory()
      .then(res => {
        // res.data.items[1].children
        this.categoryList = res.data.items.find(ele => ele.category.name == '乐居').children
      })
    findAllBrand()
      .then(res => {
        this.brandList = res.data.items
      })
  },
  mounted() {

  },
  methods: {
    getUploadImg1(val) {
      console.log(val)
      var arr = val.data.fileUrl.split('/')
      this.fileList.push({
        name: arr[arr.length - 1],
        url: val.data.fileUrl
      })
    },
    save() {
      var params = JSON.parse(JSON.stringify(this.form))
      params.pmsSkuStockList.forEach(ele => {
        ele.spData = JSON.stringify(ele.spData)
      })
      params.product.albumPics = this.fileList.map(ele => ele.url).join(',')
      if (this.$route.query.id) {
        updateProductAndSkus(params)
        return
      }
      addProductAndSkus(params)
    },
    getUploadImg(val, index) {
      console.log(val, index)
      this.form.pmsSkuStockList[index].pic = val.data.fileUrl
    },
    addSku() {
      var colorList = this.colorList.filter(ele => ele.isSelected)
      var sizeList = this.sizeList.filter(ele => ele.isSelected)
      colorList.forEach(ele => { // 红色  粉色
        sizeList.forEach(ite => { // 64g  128g
          var obj = {
            'id': '', // 新增不需要,编辑需要
            'lockStock': '', // 锁定库存 预留
            'lowStock': '', // 低库存预警  预留
            'pic': '', // sku封面图片
            'price': '', // 价格
            'productId': '', // 商品id,新增不需要,后台会自动关联
            'promotionPrice': '', //  促销价格  预留
            'sale': '', // 销量 预留
            'skuCode': '', // sku编码
            'spData': [{ 'key': '颜色', 'value': ele.name }, { 'key': '大小', 'value': ite.name }], //   [{"key":"颜色","value":"土豪金"},{"key":"大小","value":"128g"}]
            'stock': '', // 库存
            'modifyTime': '', // 更新时间 后台维护
            'createTime': '' // 后台自动生成
          }
          this.form.pmsSkuStockList.push(obj)
        })
      })
    },
    addColor() {
      if (this.colorList.find(ele => ele.name == this.color)) {
        return
      }
      console.log(this.color, this.color.length)
      if (this.color.length == 0) {
        return
      }
      this.colorList.push(
        {
          name: this.color,
          isSelected: false,
          id: new Date().getTime() })

      this.color = ''
    },
    addSize() {
      if (this.sizeList.find(ele => ele.name == this.size)) {
        return
      }

      if (this.size.length == 0) {
        return
      }
      this.sizeList.push(
        {
          name: this.size,
          isSelected: false,
          id: new Date().getTime() })

      this.size = ''
    },
    getName(val, val1) {
      if (val1) {
        //  获取的是商品品牌
        var item = this.brandList.find(ele => ele.id == val)
        this.form.product.brandName = item.name
      } else {
        //  获取的是商品分类
        var item = this.categoryList.find(ele => ele.id == val)
        this.form.product.productCategoryName = item.name
      }
      // console.log(val)
      // var item = this.categoryList.find(ele => ele.id == val)
      // this.form.product.productCategoryName = item.name
    },
    prev() {
      this.active--
    },
    next() {
      this.active++
    }
  }
}
</script>

<style scoped lang="scss">

</style>
